import { createBrowserRouter, Link } from "react-router-dom";
import React from "react";
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  TableOutlined,
} from '@ant-design/icons';
import App from "./App";
import {VideoPlayer} from "../pages/VideoPlayer";
import { Upload } from "../pages/Upload";
import { TableList } from "../pages/TableList";

const menuList = [
  {
    key: '/dashboard',
    icon: <UserOutlined />,
    label: <Link to="/dashboard">Dashboard</Link>,
    // component: <UserProfile/>
    // component:<MyComponent/>
    // component: React.createElement(MyComponent)
    // component: React.createElement(React.lazy(() => import('../pages/UserProfile')))
    component: <div>DashBoard...</div>
  },
  {
    key: '/videoPlayer',
    icon: <VideoCameraOutlined />,
    label: <Link to="/videoPlayer">VideoPlayer</Link>,
    component: <VideoPlayer/>
  },
  {
    key: '/upload',
    icon: <UploadOutlined />,
    label: <Link to="/upload">Upload</Link>,
    component: <Upload/>
  },
  {
    key: '/tableList',
    icon: <TableOutlined />,
    label: <Link to="/tableList">TableList</Link>,
    component: <TableList/>
  }
];

const routes = createBrowserRouter([
  {
      path: "/",
      element: <App />,
      children: menuList.map((item) => {
        return {
          path: item.key,
          element: item.component,
        };
      }),
    },
  ]
);

export { menuList };
export default routes;